/* ############################### Éléments images et dropdown de la navbar ############################### */
#logo{
    max-height: 40px;
    width: auto;
}

#profil{
    max-height: 30px;
    width: auto;
}

.dropdown-item:hover{
    color: black !important;
}


/* ############################### Background and font-style ############################### */
.bg-netflix{
    background-color: #141414;
}    

h1{
    font-family: "Permanent Marker", cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 5em;
}    

.top-main{
    background-image: url(/public/assets/img/pexels-danny-meneses-943096.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}    


/* ############################### Taille, réactions et barre de scroll des cards ############################### */
.skillCard{
    width: 280px;
    min-width: 280px;
    height: auto;
    transition: width 0.3s, height 0.3s;
}

@media screen and (min-width: 1200px){
    .skillCard:hover{
        width: 400px;
    }    
}

.description {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}

.description.active {
    max-height: 250px;
}

.scrollContainer{
scrollbar-width: none;
}

#scrollLeft, #scrollRight{
    top: 80px;
}

.bi-arrow-right-circle-fill,.bi-arrow-left-circle-fill{
    font-size: 3rem;
    color: #141414;
}

#automaltique:hover{
    cursor: pointer;
}

#pendu:hover{
    cursor: pointer;
}

#yams:hover{
    cursor: pointer;
}

#seeds:hover{
    cursor: pointer;
}

.skillCardContainer{
    width: min-content;
}

#videoResum{
    width: 60vw;
}


object{
    width: 50vw;
    min-height: 70vh;
}

@media screen and (orientation: portrait) {
    #videoResum{
        width: 80vw;
    }

    object{
        width: 90vw;
        min-height: 70vh;
    }
    
}

#objectDiv{
    width: max-content;
}